<!doctype html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tyler Cipriani ::   Equirectangular Bluebell Trail</title>

<link rel="stylesheet" href="https://cdn.pannellum.org/2.3/pannellum.css"/>
<script type="text/javascript" src="https://cdn.pannellum.org/2.3/pannellum.js"></script>

<style>
    body {
        font: 1em/1.5em sans-serif;
        text-align: center;
        color: #333;
    }
    .page {
        margin: 64px auto;
        width: 80%;
        max-width: 2048px;
    }
    header { text-align: left; }
    img { max-width: 100%; }
    #panorama {
        width: 100%;
    }
    .pnlm-container .panorama-hidden {
        display: none;
    }
    table {
        margin: 0 auto;
        border-collapse: collapse;
        border-spacing: 0;
    }
    td {
        border: 1px solid gainsboro;
        cell-padding: 0.25em;
    }
</style>
</head>

<body>
<div class="page">
    <header>
        <h1><a href="https://tylercipriani.com">tylercipriani.com</a></h1>
    </header>
    <figure>
        <div id="panorama">
        <img class="panorama-hidden" src="https://photos.tylercipriani.com/thumbs/9e/d3b765e6aefef7c2f798a716552d7a/large.jpg">
        </div>
        <figcaption>
        <h1>  Equirectangular Bluebell Trail</h1>
        <p>  This photo was taken from the middle of Bluebell trail, the Flatirons, Chautauqua park, Boulder, Colorado. Photo was taken using a Nodal Ninja NN3 MKII on a Sirui T-025X carbon fiber tripod. The image was created from 144 photos that were lens-corrected in Darktable, averaged using enfuse, and stitched using hugin. Created with 100% open source software.</p>
        </figcaption>
    </figure>
    <p>
        <a href="small.jpg">Small</a> |
        <a href="medium.jpg">Medium</a> |
        <a href="large.jpg">Large</a> |
        <a href="original.jpg">Original</a>
    </p>
    <table>
    <tr>
    <th>EXIF info</th>
    </tr>
                <tr>
                    <td>Focal Length</td>
                    <td>14.0 mm</td>
                </tr>
                <tr>
                    <td>F Number</td>
                    <td>8</td>
                </tr>
                <tr>
                    <td>Exposure Time</td>
                    <td>1/60</td>
                </tr>
                <tr>
                    <td>Make</td>
                    <td>NIKON CORPORATION</td>
                </tr>
                <tr>
                    <td>Model</td>
                    <td>NIKON D610</td>
                </tr>
                <tr>
                    <td>Date Created</td>
                    <td>2017-04-16 08:26:06</td>
                </tr>
                <tr>
                    <td>ISO</td>
                    <td>100</td>
                </tr>
                <tr>
                    <td>Lens</td>
                    <td>14mm f/2.8-1.4</td>
                </tr>
            </table>
            </body>
            </html>

            <table>
                <tr><td>hi</td><td>there</td></tr>
            </table>
        </article>
</div><!-- .page -->
<script>
    (function() {
        var jsonLoadFailed, resize, request;
        request = new XMLHttpRequest();

        jsonLoadFailed = function() {
            alert('Loading json failed. Sorry :(');
        }

        resize = function() {
            var maxWidth = 1280,
                maxHeight = 960,
                article = document.querySelector('.page'),
                pano = document.querySelector('#panorama'),
                ratio = maxWidth/maxHeight,
                idealHeight = (article.clientWidth / ratio),
                viewHeight = document.documentElement.clientHeight;

            pano.style.height = Math.min(viewHeight, idealHeight) + 'px';
        }

        resize();
        window.onresize = resize;

        request.open('GET', 'config.json', true);

        request.onload = function() {
              if (request.status >= 200 && request.status < 400) {
                pannellum.viewer('panorama', JSON.parse(request.responseText));
            } else {
                jsonLoadFailed();
            }
        };

        request.onerror = jsonLoadFailed;
        request.send();
    })()
</script>
</body>
</html>
